<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>FAC</title>
        <style>
            body, div, h4 {
                margin: 0;
            }
            body {
                width: 100%;
                min-width: 1200px;
                height: 100vh;
                min-height: 650px;
            }
            .big-box {
                width: 100%;
                height: 100%;
                background: url(__IMG__/login_bg.jpg) 100% 100%;
                overflow: hidden;
            }
            .title {
                margin: 3% auto 5%;
                display: block;
                height: 10%;
            }
            .login {
                width: 400px;
                padding: 0 110px;
                background: #fff;
                margin: 0 auto;
                overflow: hidden;
            }
            .login-title {
                font-size: 28px;
                text-align: center;
                color: #007aff;
                font-weight: normal;
                padding: 70px 0;
                position: relative;
            }
            .login-title:before, .login-title:after {
                content: '';
                display: block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                background: #007aff;
                top: 86px;
            }
            .login-title:before {
                left: 80px;
            }
            .login-title:after {
                right: 80px;
            }
            .in-label {
                display: block;
                width: 100%;
                border-bottom: 2px solid #e6e6e6;
                padding: 25px 8px 5px;
            }
            .icon {
                vertical-align: middle;
            }
            .user {
                vertical-align: middle;
                border: none;
                color: #999;
                font-size: 16px;
                padding-left: 10px;
                outline: none;
            }
            .btn {
                font-size: 18px;
                display: block;
                margin: 50px auto;
                width: 226px;
                height: 46px;
                border-radius: 23px;
                border: none;
                color: #fff;
                background: #007aff;
                box-shadow: 0 10px 10px 0px #73b6ff;
                cursor: pointer;
                outline: none;
            }
        </style>
    </head>
    <body>
        <div class="big-box">
            <img class="title" src="__IMG__/login_title.png" alt="">
            <form class="login" id="login">
                <h4 class="login-title">後台管理系統</h4>
                <label class="in-label" for="user">
                    <img class="icon" src="__IMG__/login_user.png" alt="">
                    <input type="text" class="user" name="name" placeholder="請輸入用戶名" {notempty name="usermember"}value="{$usermember}"{/notempty}>
                </label>
                <label class="in-label" for="user">
                    <img class="icon" src="__IMG__/login_pass.png" alt="">
                    <input type="password" class="user" name="password" placeholder="請輸入密碼">
                </label>
                <button class="btn" lay-submit lay-filter="login">登錄</button>
                 {:token('__token__', 'sha1')}
            </form>
        </div>
    </body>
</html>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/sideshow/js/TweenLite.min.js"></script>
<script src="__PUBLIC__/sideshow/js/EasePack.min.js"></script>
<script src="__PUBLIC__/sideshow/js/rAF.js"></script>
<script src="__PUBLIC__/sideshow/js/demo-1.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        $(window).on('load', function() {
            form.on('submit(login)', function(data) {
                $.ajax({
                    url:"{:url('admin/common/login')}",
                    data:$('#login').serialize(),
                    type:'post',
                    async: false,
                    success:function(res) {
                        layer.msg(res.msg,{offset: '100px',anim: 4});
                        if(res.code == 1) {
                            setTimeout(function() {
                                location.href = res.url;
                            }, 1500);
                        } else {
                            $('#captcha').click();
                        }
                    }
                })
                return false;
            });
        });
    });
</script>